<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript">
	
	function setHead(e){
        var html = $("#urlHead").html();
        var text = $("#urlHead").text();
        var sub = html.substr(text.length);
		var head = $(e).text();
		$("#urlHead").html(head + ' ' + sub);
		$("#head").val(head);
	}
	
	function modify(e,linkId){
		$(e).parent().prevAll().each(function(){
			var attrName = $(this).attr("name");
			var text = $(this).text();
			if(attrName=="url"){
				var _url = $.trim(text);
				var head = _url.substring(0,_url.indexOf(":"));
				$("#"+head).click();
				$("#url").val(_url.substring(_url.lastIndexOf("/")+1));
			}else if(attrName =="weight"){
				$("#weight").val(text);
			}else if(attrName=="name"){
				$("#name").val(text);
			}
		});
		$("#linkId").val(linkId);
		var y = $("#linkDiv").offset().top;
		$('body,html').animate({ scrollTop: y }, 200);
	}
</script>
<div class="col-md-8 col-sm-10 ">
            <!-- 帖子列表 -->
            <div class="panel panel-default">
                <div class="panel-heading" id="linkDiv">增加快捷连接

                </div>
                <div class="panel-body">
                <form class="form-horizontal" action="${ctx }/link/saveOrUpdateLink" method="post">
                	<input type="hidden" name="linkId" id="linkId">
                    <div class="form-group">
                        <label class="col-md-2 control-label">名称</label>
                        <div class="col-md-10">
                            <input type="text" class="form-control" id="name" name="name" placeholder="快捷菜单显示名字">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label">地址:</label>
                        <div class="col-md-10">
                        	<div class="input-group">
						      <div class="input-group-btn">
						        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="urlHead">http:// <span class="caret"></span></button>
						        <ul class="dropdown-menu" role="menu">
						          <li><a href="#" onclick="setHead(this);" id="http">http://</a></li>
						          <li><a href="#" onclick="setHead(this);" id="https">https://</a></li>
						        </ul>
						      </div>
						      <input type="hidden" id="head" name="head" value="http://">
						      <input type="text" class="form-control" id="url" name="url"  placeholder="连接地址">
						    </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-2 control-label">权重:</label>
                        <div class="col-md-10">
                            <input type="text" class="form-control" id="weight" name="weight" placeholder="数字越大越靠下">
                        </div>
                    </div>
                    <div class="text-center">
                        <button type="submit" class="btn btn-default" onclick="submitInfo();">保存</button>
                    </div>
                    
                </form>
                </div>
            </div>
            
            <div class="panel panel-default">
                <div class="panel-heading">已有快捷连接

                </div>
                <div class="panel-body ">
                	<div class="table-responsive">
                	<table class="table" style="border-collapse: inherit;">
				    	<thead>
				    		<tr>
				    			<th>权重</th>
				    			<th>名称</th>
				    			<th>地址</th>
				    			<th>操作</th>
				    		</tr>
				    	</thead>
				    	<tbody>
				    		<c:forEach items="${userLinks }" var="link">
				    		<tr>
				    			<td name="weight">${link.weight }</td>
				    			<td name="name">${link.name }</td>
				    			<!-- style="width: 70px; text-overflow:ellipsis;white-space:nowrap;" -->
				    			<td class="text-nowrap" name="url">
				    				<span style="width: 190px;  text-overflow: ellipsis;  white-space: nowrap;  overflow: hidden; display: block;" title="${link.url }">
				    					${link.url }
				    				</span>
				    			</td>
				    			<td name="operate">
				    				<a href="${ctx }/link/delLink?linkId=${link.id}" class="btn btn-danger btn-xs"><span class="glyphicon glyphicon-remove"></span> 删</a>
				    				<button class="btn btn-success btn-xs" onclick="modify(this,${link.id});"><span class="glyphicon glyphicon-pencil"></span> 改</button>
				    			</td>
				    		</tr>
				    		</c:forEach>
				    	</tbody>
				  	</table>
				  	</div>
                </div>
            </div>

        </div>